---
permalink: "/advanced/case-studies/navigation/behaviors/actions/index.xml"
tags: "Advanced/Case Studies"
hv_title: "Navigation"
hv_button_behavior: "back"
---

<doc xmlns="https://hyperview.org/hyperview">
  <screen>
    <styles>
      {% include 'templates/styles.xml.njk' %}
      <style id="body" backgroundColor="white" flex="1" />
      <style id="label" fontSize="18" lineHeight="24" margin="24" />
      <style id="label-link" color="blue" fontSize="18">
        <modifier pressed="true">
        <style color="red" fontWeight="bold" />
        </modifier>
      </style>
    </styles>
    <body style="body">
      {% include 'templates/header.xml.njk' %}
      <text style="label">This is screen 1.</text>
      <text
        delay="800"
        href="/hyperview/public/advanced/case-studies/navigation/screen2.xml"
        show-during-load="screen2Loading"
        style="label label-link"
      >
        Click me
      </text>
    </body>
  </screen>
  <screen id="screen2Loading">
    <styles>
      {% include 'templates/styles.xml.njk' %}
      <style id="body" backgroundColor="white" flex="1" />
      <style id="loading-text" fontSize="14" fontWeight="normal" marginBottom="16" color="#999" />
      <style id="loading" alignItems="center" flex="1" justifyContent="center" />
    </styles>
    <body style="body">
      {% include 'templates/header.xml.njk' %}
      <view style="loading">
        <text style="loading-text">Screen 2 is loading…</text>
        <spinner/>
      </view>
    </body>
  </screen>
</doc>
